<template>
  <div class="all">
    <div class="head">
      <div class="headclick" @click="back">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span class="text-large font-600 mr-3">城市维护</span>
      </div>
      <div class="selfclick" @click="self">
        <img src="../../assets/user.png" style="width:25px;" />
      </div>
    </div>
    <div class="main">
      <el-input v-model="input" style="max-width: 400px" placeholder="请输入城市名">
        <template #prepend>
          <el-icon>
            <School />
          </el-icon>
        </template>
        <template #append>
          <el-button :icon="Search" @click="Searchby" />
        </template>
      </el-input>
      <el-icon @click="refresh">
        <Refresh />
      </el-icon><el-text>刷新</el-text><br>
      <el-scrollbar height="400px" always>

        <div v-for="city in cityArr" :key="city.cityID" class="scrollbar-demo-item">
        <div class="row"> <el-text>城市ID:{{ city.cityID }}</el-text> <el-icon size="25px" @click="toupdate(city.cityID)">
            <Edit />
          </el-icon></div>

        <el-icon>
          <School />
        </el-icon>
        城市名:{{ city.cityName }}<br>
        <el-icon>
          <User />
        </el-icon>
        救援人数:{{ city.rescuePersonnel }}<br>

        <el-icon>
          <Van />
        </el-icon>
        救援车辆数:{{ city.rescueVehicles }}<br>
        <div class="row">
          <div> <el-icon>
              <Bicycle />
            </el-icon>
            交通情况: {{ city.trafficCondition }} </div>
        </div>
        <br>
      </div>
       
        <el-icon>
          <Service />
        </el-icon><el-text>客服</el-text>
      </el-scrollbar>







      <el-dialog v-model="updateForm" title="城市信息修改" width="300">
        <el-form :model="cityup">
          <el-form-item label="城市ID">
            <el-input v-model="cityup.cityID" autocomplete="off" disabled="" />
          </el-form-item>
          <el-form-item label="城市名">
            <el-input v-model="cityup.cityName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="救援人数">
            <el-input v-model="cityup.rescuePersonnel" autocomplete="off" />
          </el-form-item>
          <el-form-item label="救援车辆">
            <el-input v-model="cityup.rescueVehicles" autocomplete="off" />
          </el-form-item>
          <el-form-item label="交通情况">
            <el-input v-model="cityup.trafficCondition" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="updateForm = false">取消</el-button>
            <el-popconfirm title="你确认要修改吗?" @confirm="update">
              <template #reference>
                <el-button type="primary">
                  确认
                </el-button>
              </template>
            </el-popconfirm>

          </div>
        </template>
      </el-dialog>



    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, inject } from "vue";
import { ElMessageBox, ElLoading, ElMessage } from "element-plus";
import {
  ArrowLeft,
  School,
  Search,
  User,
  Van,
  Bicycle,
  Refresh,
  Service,
  Edit,
  DeleteFilled,
} from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const axios = inject("axios");
const input = ref("");
const cityArr = ref([]);
let updateForm = ref(false);
let cityup = ref({});
const city = ref({
  cityID: "",
  cityName: "",
  rescuePersonnel: "",
  rescueVehicles: "",
  trafficCondition: "",
});
const Searchby = () => {
  axios
    .post("/Worker/listCityByName ", {
      cityName: input.value,
    })
    .then((response) => {
      cityArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
const toupdate = (ID) => {
  updateForm.value = true;
  axios
    .post("/Worker/getCityByID ", {
      cityID: ID,
    })
    .then((response) => {
      cityup.value = response.data;
      console.log(cityup.value);
    })
    .catch((error) => {
      console.log(error);
    });
};
const update = () => {
  axios
    .post("/Worker/renewCityInfo ", {
      cityID: cityup.value.cityID,
      cityName: cityup.value.cityName,
      rescuePersonnel: cityup.value.rescuePersonnel,
      rescueVehicles: cityup.value.rescueVehicles,
      trafficCondition: cityup.value.trafficCondition,
    })
    .then((response) => {
      cityup.value = response.data;
      init();
    })
    .catch((error) => {
      console.log(error);
    });
  updateForm.value = false;
};
const init = () => {
  axios
    .post("/Worker/listAllCity ", {})
    .then((response) => {
      cityArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();

const refresh = () => {
  init();
};
const back = () => {
  router.go(-1);
};
const self = () => {
  router.push("/workerMainPage/workerSelfPage");
};
</script>

<style scoped>
.head {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.row {
  display: flex;
  justify-content: space-between;
}

.all {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 居中 */
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #c5ebe3, #a9c1ed);
  /* 溢出隐藏 */
  overflow: hidden;
}

.scrollbar-demo-item {
  height: 130px;
  margin: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.main {
  margin: 20px;
}
</style>